<template>
  <div class="real-auth">
    <div
      style="margin: 52px auto; width: 120px; height: 120px;">
      <Image :src="Person" />
    </div>
    <CellGroup>
      <Cell>
        <template #title>
          <div
            style="text-align: center; font-size: 22px; font-weight: 600">
            <span
              style="color: var(--van-primary-color);">您已通过实人认证</span>
          </div>
        </template>
      </Cell>
      <Cell title="真实姓名"
        :value="userStore.userInfo.realName" />
      <Cell title="身份证号" :value="userStore.userInfo.realId.split('')
        .map((i, index) => [6, 7, 8, 9, 10, 11, 12, 13].includes(index) ? '*' : i)
        .join('')" />
    </CellGroup>
    <footer>
      <ul>
        <li>1、身份信息仅供快回收平台提供诚信保证使用。</li>
        <li>2、快回收承若不向其他第三方透露您的个人信息。</li>
      </ul>
    </footer>
  </div>
</template>
<!--  -->
<script setup lang="ts">
import {
  Cell, CellGroup, Image,
} from 'vant';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';

import Person from '@/assets/images/person-auth.png';
import useUserStore from '@/stores/user.store';

import { RealAuthType } from '../const';

const router = useRouter();
const userStore = useUserStore();

onMounted(() => {
  if (userStore.userInfo.realFlag === RealAuthType.未实名) {
    router.replace({ name: 'RealAuth' });
  }
});
</script>
<style lang="less" scoped>
.real-auth {
  height: 100%;
  display: flex;
  flex-direction: column;

  footer {
    margin: auto 0 10px;
    padding: 0 20px;
    color: #999;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
  }
}
</style>
